<template>
  <div>
    <van-field
      v-model="filedValue"
      is-link
      readonly
      input-align="inputAlign"
      :label="label"
      @click="show = true"
    >
      <!-- <template #right-icon>
        <img src="../../assets/img/common/selectRow.png" alt="" />
      </template> -->
    </van-field>
    <van-popup v-model:show="show" round position="bottom">
      <van-picker-group
        v-if="type == 'datetime'"
        :title="title"
        :tabs="['选择日期', '选择时间']"
        @confirm="confirm"
        @cancel="show = false"
      >
        <van-date-picker
          v-model="currentDate"
          :min-date="minDate"
          :max-date="maxDate"
        />
        <van-time-picker v-model="currentTime" />
      </van-picker-group>
      <van-date-picker
        v-else
        @confirm="confirm"
        @cancel="show = false"
        v-model="currentDate"
        :title="title"
        :min-date="minDate"
        :max-date="maxDate"
        :columns-type="columnsType"
      />
    </van-popup>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, onBeforeMount } from 'vue'
import { getCurrentDate, getCurrentMinutes } from '@/utils/date.js'
const emit = defineEmits(['change', 'update:value'])

const props = defineProps({
  columnsType: {
    type: Array,
    default: () => {
      return ['year']
    }
  },
  minDate: {
    type: Object,
    default: new Date(new Date().getFullYear() - 10, 1, 1)
  },
  maxDate: {
    type: Object,
    default: new Date(new Date().getFullYear() + 20, 5, 1)
  },
  label: {
    type: String,
    default: '日期'
  },
  type: {
    type: String,
    default: 'date'
  },
  value: {
    type: String
  },
  inputAlign: {
    type: String,
    default:'left'
  },
})

const show = ref(false)

const title = computed(() => {
  return props.columnsType.length == 1
    ? '选择年'
    : props.columnsType.length == 2
    ? '选择年月'
    : props.columnsType.length == 3
    ? '选择年月日'
    : '请选择'
})

// 格式化日期显示格式
const formatDateByFiled = value => {
  return value.replace('-', '/').replace('-', '/')
}

// 格式化日期显示格式
const formatDateByFiled2 = value => {
  return value.replace('/', '-').replace('/', '-')
}

// 格式化年份
const filedModelValue = ref(
  props.columnsType.length == 1 && props.value
    ? props.value + '年'
    : props.value
)

// filed显示值
const filedValue = computed({
  get() {
    let res = ''
    if (filedModelValue.value) {
      // 子组件有值传入
      res = formatDateByFiled(filedModelValue.value)
    } else {
      // 子组件无值传入-默认回显当前时间
      if (props.type == 'datetime') {
        res =
          new Date().getFullYear() +
          '/' +
          (new Date().getMonth() + 1 < 10
            ? '0' + (new Date().getMonth() + 1)
            : new Date().getMonth() + 1) +
          '/' +
          (new Date().getDate() < 10
            ? '0' + new Date().getDate()
            : new Date().getDate()) +
          ' ' +
          getCurrentMinutes().split(' ')[1].split(':')[0] +
          ':' +
          getCurrentMinutes().split(' ')[1].split(':')[1]
      } else {
        if (props.columnsType.length == 1) {
          res = new Date().getFullYear() + '年'
        }
        if (props.columnsType.length == 2) {
          res =
            new Date().getFullYear() +
            '/' +
            (new Date().getMonth() + 1 < 10
              ? '0' + (new Date().getMonth() + 1)
              : new Date().getMonth() + 1)
        }
        if (props.columnsType.length == 3) {
          res =
            new Date().getFullYear() +
            '/' +
            (new Date().getMonth() + 1 < 10
              ? '0' + (new Date().getMonth() + 1)
              : new Date().getMonth() + 1) +
            '/' +
            (new Date().getDate() < 10
              ? '0' + new Date().getDate()
              : new Date().getDate())
        }
      }
      if (props.columnsType.length == 1) {
        emit('update:value', res.replace('年', ''))
      } else {
        emit('update:value', formatDateByFiled2(res))
      }
    }
    return res
  },
  set(newValue) {
    filedModelValue.value = newValue
  }
})

// 格式化日期-组件回显日期
const formatDateByCom = value => {
  let resultArr = []
  if (props.type == 'datetime') {
    let date = value.split(' ')[0]
    let arr = date.split('-')
    console.log(arr)
    resultArr = arr
  } else {
    let arr = []
    if (props.columnsType.length == 1) {
      arr = [value]
    }
    if (props.columnsType.length == 2) {
      arr = [value.split('-')[0], value.split('-')[1]]
    }
    if (props.columnsType.length == 3) {
      arr = [value.split('-')[0], value.split('-')[1], value.split('-')[2]]
    }
    resultArr = arr
  }
  return resultArr
}

// 时间、日期、年份、月份选择器value-组件回显日期
const currentDate = ref(
  props.value
    ? formatDateByCom(props.value)
    : props.type == 'datetime'
    ? [
        getCurrentDate().split('-')[0],
        getCurrentDate().split('-')[1],
        getCurrentDate().split('-')[2]
      ]
    : props.columnsType.length == 1
    ? [getCurrentDate().split('-')[0]]
    : props.columnsType.length == 2
    ? [getCurrentDate().split('-')[0], getCurrentDate().split('-')[1]]
    : props.columnsType.length == 3
    ? [
        getCurrentDate().split('-')[0],
        getCurrentDate().split('-')[1],
        getCurrentDate().split('-')[2]
      ]
    : []
)

// 格式化时分-组件回显时分
const formatTimeByCom = value => {
  let resultArr = []
  if (props.type == 'datetime') {
    let time = value.split(' ')[1]
    let arr = time.split(':')
    resultArr = arr
  }
  return resultArr
}

// 时间选择器value-组件回显时分
const currentTime = ref(
  props.value
    ? formatTimeByCom(props.value)
    : [
        getCurrentMinutes().split(' ')[1].split(':')[0],
        getCurrentMinutes().split(' ')[1].split(':')[1]
      ]
)

// 点击确认按钮触发
const confirm = val => {
  if (props.type == 'datetime') {
    filedValue.value = `${val[0].selectedValues[0]}/${val[0].selectedValues[1]}/${val[0].selectedValues[2]} ${val[1].selectedValues[0]}:${val[1].selectedValues[1]}`
    let value = filedValue.value.replace('/', '-').replace('/', '-')
    emit('change', value)
  } else {
    filedValue.value =
      props.columnsType.length == 1
        ? `${val.selectedValues[0]}年`
        : props.columnsType.length == 2
        ? `${val.selectedValues[0]}-${val.selectedValues[1]}`
        : props.columnsType.length == 3
        ? `${val.selectedValues[0]}-${val.selectedValues[1]}-${val.selectedValues[2]}`
        : val.selectedValues[0]
    emit('change', currentDate.value)
  }
  if (props.columnsType.length == 1) {
    emit('update:value', filedValue.value.replace('年', ''))
  } else {
    emit('update:value', formatDateByFiled2(filedValue.value))
  }
  show.value = false
}

onBeforeMount(() => {})
onBeforeMount(() => {})
</script>
<style lang="less" scoped>
:deep(.van-cell) {
  align-items: center;
}
:deep(.van-field__right-icon) {
  display: flex;
  align-items: center;
  img {
    width: 32px;
  }
}
:deep(.van-field__body) {
  font-size: 28px;
}
:deep(.van-field__right-icon) {
  padding: 0;
}
</style>
